// 响应式混合
.mobile(@rules) {
  @media (max-width: @screen-md) {
    @rules();
  }
}

.tablet(@rules) {
  @media (min-width: @screen-lg) {
    @rules();
  }
}

// 文本溢出省略
.text-ellipsis(@lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
}

// 毛玻璃效果
.glass-effect(@bg-color: rgba(255, 255, 255, 0.1)) {
  background: @bg-color;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

// 渐变背景
.gradient-bg(@direction: 135deg, @color1: @primary-color, @color2: @secondary-color) {
  background: linear-gradient(@direction, @color1, @color2);
}

// 卡片样式
.card-style(@padding: @spacing-lg) {
  background: @bg-primary;
  border-radius: @border-radius;
  box-shadow: @shadow-md;
  padding: @padding;
}

// 按钮样式重置
.reset-button() {
  border: none;
  outline: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

// 输入框样式
.input-style() {
  width: 100%;
  padding: @spacing-md;
  border: 1px solid @border-color;
  border-radius: @border-radius-sm;
  font-size: @font-size-base;
  transition: all @transition-fast;

  &:focus {
    outline: none;
    border-color: @primary-color;
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  }

  &::placeholder {
    color: @text-muted;
  }
}

// 居中对齐
.center-flex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 绝对定位居中
.absolute-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 动画混合
.fade-in(@duration: @transition-normal) {
  animation: fadeIn @duration ease-in-out;

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.slide-up(@duration: @transition-normal) {
  animation: slideUp @duration ease-out;

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
